<template>
    <h2>基础用法</h2>
    <div class="tw:grid tw:grid-cols-2 tw:gap-4">
        <div class="项目">01</div>
        <div class="项目">02</div>
        <div class="项目">03</div>
        <div class="项目">04</div>
    </div>
    <h2>纵横向独立控制</h2>
    <div class="tw:grid tw:grid-cols-3 tw:gap-x-8 tw:gap-y-4">
        <div class="项目">01</div>
        <div class="项目">02</div>
        <div class="项目">03</div>
        <div class="项目">04</div>
        <div class="项目">05</div>
        <div class="项目">06</div>
    </div>
</template>

<style scoped="">
    @reference '@/tailwind.css';
    .项目 {
        @apply tw:bg-violet-500 tw:min-h-12 tw:flex tw:justify-center tw:items-center tw:rounded-md
    }
</style>